<template>
  <div>
    <span id="output">{{ myFormula }}</span>
  </div>
  <el-card class="box-card">
    <template #header>
      <span>
        头部
      </span>
    </template>
    <div class="card_content">
        <span v-html="myFormula" class="line-break"></span>
    </div>
  </el-card>
</template>


<script setup>
// import '@/assets/mathjax/es5/tex-mml-chtml'
import { reactive, ref, toRaw, onMounted, watch, } from 'vue'
//自己指定公式，也可以动态输入
const myFormula = ref('<p>现有一段时长 20 秒、PAL 制式（25fps）、画面尺寸为 1024*576 的未经压缩的</p>AVI 格式视频，容量约为 562.5MB ，则该视频每帧画面的位深度为$a^2+b^2=\\frac{分子}{分母}$') 
	
//渲染函数，调用时会渲染指定节点elements，如果没有指定节点，渲染页面上所有公式
//elements可以是一个DOM节点的数组(注意getXXXsByYYY的结果是collection，必须手动转为数组才行)
const TypeSet = async function (elements) {
    if (!window.MathJax) {
        return
    }
    window.MathJax.startup.promise = window.MathJax.startup.promise
        .then(() => {
            return window.MathJax.typesetPromise(elements)
        })
        .catch((err) => console.log('Typeset failed: ' + err.message))
    return window.MathJax.startup.promise
}

//onMounted的时候必须调用
onMounted(()=>{
  TypeSet()
  //这里写自己的onMounted内容
})

watch(()=> myFormula.value,
  (newValue)=>{
    //直接调用TypeSet()也可以，但是会重新渲染页面所有公式
    TypeSet([document.getElementById("output")])
  })
</script>
<style scoped>
  .box-card {
    display: flex;
    flex-flow: column wrap;
    align-items: stretch;
    height: auto;
    width: 100%;
    overflow-y: auto;
  }
  .card_content {
    display: flex;
    flex-flow: column wrap;
    margin: 0px;
    padding: 0px;
  }
</style>